import { useState, useEffect } from 'react';
import MonacoEditor from 'react-monaco-editor';

const EditorJson = () => {
  const [code, setCode] = useState('// type your code...');
  const [options, setOptions] = useState({ 
    selectOnLineNumbers: true,
    minimap: { enabled: true } // 显示迷你地图方便演示滚动
  });

  useEffect(() => {
    const queryJson = `# 请求示例
query bookDetails {
  bookById(id: "book-1") {
    id
    name
    pageCount
    author {
      id
      firstName
      lastName
    }
  }
}`;
    setCode(queryJson);
  }, []);

  const onChange = (newValue) => {
    setCode(newValue);
  };

  const editorDidMount = (editor) => {
    editor.focus();

    setOptions({
        selectOnLineNumbers: false,
        minimap: { enabled: true }, // 迷你地图
        scrollBeyondLastLine: false, // 禁止滚动超过最后一行
        overviewRulerLanes: 20, // 隐藏概览标尺
        scrollbar: {
        //   vertical: 'hidden', // 隐藏垂直滚动条
        //   horizontal: 'hidden', // 隐藏水平滚动条
          useShadows: false,
          verticalHasArrows: false,
          horizontalHasArrows: false
        }
    })
    // 强制更新编辑器布局
    editor.layout();
  };

  return (
    <>
      <MonacoEditor
        width="100%"
        height="400"
        language="json"
        theme="vs-dark"
        value={code}
        options={options}
        onChange={onChange}
        editorDidMount={editorDidMount}
      />
    </>
  );
};

export default EditorJson;